<template>
  <div class="boardProduct new-box" boardProduct>
    <div class="time-box df">
      <p class="time-around">{{ $route.query.startDate }} 至 {{ $route.query.endDate }}</p>
      <a-button icon="rollback" class="go-back-board" @click="goBack">返回看板</a-button>
    </div>
    <div class="main-body ">
      <a-table :columns="tableColumns" :pagination="false" :scroll="{ x: 900, y: tableHeight }" :data-source="dataList" :loading="isLoading" rowKey="">
        <!-- 产品信息 -->
        <template slot="productId" slot-scope="text, record">
          <p>产品ID：{{ record.productId || '空' }}</p>
          <p>产品名称：{{ record.productName || '空' }}</p>
          <p>站点：{{ record.locationName || '空' }}</p>
          <p>商家：{{ record.businessName }}</p>
        </template>
        <!-- 主播信息 -->
        <template slot="agentId" slot-scope="text, record">
          <div v-if="record.agentName !== '' && record.agentId !== ''">
            <p>主播名：{{ record.agentName || '主播名' }}</p>
            <p>主播ID：{{ record.agentId || '主播ID' }}</p>
            <p>账户类型：{{ record.accountType || '账户类型' }}</p>
            <!-- <p>视频ID：{{ record.videoId || '空' }}</p> -->
          </div>
          <p v-else>视频ID：{{ record.videoId || '空' }}</p>
        </template>
        <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <a-table :columns="innerColumns" :data-source="record.itemDataList" :pagination="false"></a-table>
        </div>
        <!-- <template slot="expandedRowRender" slot-scope="text, record">
          <a-table :columns="innerColumns" :data-source="record.itemDataList" :pagination="false">{{ record }}</a-table>
        </template> -->
      </a-table>
    </div>
    <div class="paging-container">
      <a-pagination
        :pageSize="search.pageSize"
        v-model="search.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;"
        @change="
          (value) => {
            return handlePageChange(value, 'product')
          }
        "
      />
    </div>
  </div>
</template>
<script>
import { douJiaColumn } from '../column'
import { hostHostListUrl } from '@/service/djService'
import '@/assets/style/newStyle.scss'
export default {
  name: 'boardHost',
  data() {
    return {
      tableColumns: douJiaColumn.dataBoardHostDetail,
      innerColumns: douJiaColumn.dataBoardHostDetailProduct,
      dataList: [],
      search: {
        pageIndex: 1,
        pageSize: 10
      },
      pagination: {
        total: 0
      },
      isLoading: false,
      selectDate: [],
      innerDataList: [],
      getRouterParams: {}
    }
  },
  mounted() {
    this.getRouterParams = this.$route.query
    this.query(this.$route.query)
  },
  methods: {
    hostDetailAction(row = {}) {
      const { id = '' } = row
      this.$router.push({
        path: '/douJiaManage/boardProductHost',
        query: {
          id
        }
      })
    },
    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.search.pageIndex = num
      this.query(this.$route.query)
    },
    // 拿参数
    getParams(params) {
      const { pageIndex, pageSize } = this.search
      return {
        ...params,
        pageIndex,
        pageSize
      }
    },
    /**
     * 获取列表
     * @returns {Promise<void>}
     */
    query(params) {
      this.isLoading = true
      hostHostListUrl(this.getParams(params))
        .then((rs = {}) => {
          console.log(rs)
          const { list = [], rowCount = 0 } = rs
          this.dataList = Object.freeze(list) || []
          this.pagination.total = rowCount || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    goBack() {
      console.log(this.getRouterParams)
      this.$router.push({
        path: '/douJiaManage/dataBoardAdmin',
        query: this.getRouterParams
      })
    }
  }
}
</script>
<style scoped lang="less">
p {
  margin-bottom: 0;
}
.boardProduct {
  .time-box {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    .time-around {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
    .go-back-board {
      background: #e5e5e5;
      border-radius: 2px;
    }
  }
}
</style>
